<template>
  <div class="table-component">
    <div class="total-amount-title">交易时间明细</div>
    <div class="row-content">
      <el-steps style="max-width: 100%" :active="10" align-center>
        <el-step>
          <template #icon>
            <img :src="carEntering" alt="" class="icon-img" />
          </template>
          <template #title>驶入时间</template>
          <template #description>
            <div class="time-content">
              {{ orderDetails.inTime }}
            </div>
            <div v-if="timeDifference1" class="time-content2">
              {{ timeDifference1 }}
            </div></template
          >
        </el-step>
        <el-step title="登记时间">
          <template #icon>
            <img :src="orderRegistration" alt="" class="icon-img" />
          </template>
          <template #description>
            <div class="time-content">
              {{ orderDetails.createdTime }}
            </div>
            <div v-if="timeDifference2" class="time-content2">
              {{ timeDifference2 }}
            </div>
          </template>
        </el-step>
        <el-step title="驶离时间">
          <template #icon>
            <img :src="vehicleDeparture" alt="" class="icon-img" />
          </template>
          <template #description>
            <div class="time-content">
              {{ orderDetails.outTime }}
            </div>
            <div v-if="timeDifference3" class="time-content2">
              {{ timeDifference3 }}
            </div>
          </template>
        </el-step>
        <el-step title="欠费生时">
          <template #icon>
            <img :src="arrearsGeneration" alt="" class="icon-img" />
          </template>
          <template #description>
            <div class="time-content">
              {{ orderDetails.arrearsTime }}
            </div>
            <div v-if="timeDifference4" class="time-content2">
              {{ timeDifference4 }}
            </div>
          </template>
        </el-step>
        <el-step title="缴费时间">
          <template #icon>
            <img :src="paymentTime" alt="" class="icon-img" />
          </template>
          <template #description>
            <div class="time-content">
              {{ orderDetails.payTime }}
            </div>
            <div v-if="timeDifference5" class="time-content2">
              {{ timeDifference5 }}
            </div>
          </template>
        </el-step>
        <el-step title="完成时间" :description="orderDetails.completionTime">
          <template #icon>
            <img :src="orderComplete" alt="" class="icon-img" />
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, watchEffect } from "vue";
import carEntering from "@/assets/image/ico/orderManagements/car-entering.png";
import orderRegistration from "@/assets/image/ico/orderManagements/order-registration.png";
import paymentTime from "@/assets/image/ico/orderManagements/payment-time.png";
import vehicleDeparture from "@/assets/image/ico/orderManagements/vehicle-departure.png";
import arrearsGeneration from "@/assets/image/ico/orderManagements/arrears-generation.png";
import orderComplete from "@/assets/image/ico/orderManagements/order-complete.png";
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

const timeDifference1 = ref("");
const timeDifference2 = ref("");
const timeDifference3 = ref("");
const timeDifference4 = ref("");
const timeDifference5 = ref("");

const calculateTimeDifference = (time1, time2) => {
  const date1 = new Date(time1);
  const date2 = new Date(time2);
  const diffInMs = Math.abs(date2 - date1);
  const seconds = Math.floor(diffInMs / 1000);
  const days = Math.floor(seconds / (3600 * 24));
  const hours = Math.floor((seconds % (3600 * 24)) / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  let timeDifference = "";

  if (days > 0) {
    timeDifference += `${days}天 `;
  }
  if (hours > 0 || days > 0) {
    timeDifference += `${hours}小时 `;
  }
  if (minutes > 0 || hours > 0 || days > 0) {
    timeDifference += `${minutes}分钟 `;
  }

  if (minutes === 1 && remainingSeconds === 0) {
    timeDifference = timeDifference.trim(); // 移除最后一个空格
  } else if (remainingSeconds === 0) {
    timeDifference += "0秒"; // 直接添加“0秒”
  } else {
    timeDifference += `${remainingSeconds}秒`;
  }

  return timeDifference;
};

watchEffect(() => {
  if (props.orderDetails.inTime && props.orderDetails.createdTime) {
    timeDifference1.value = calculateTimeDifference(
      props.orderDetails.inTime,
      props.orderDetails.createdTime
    );
  }
  if (props.orderDetails.createdTime && props.orderDetails.outTime) {
    timeDifference2.value = calculateTimeDifference(
      props.orderDetails.createdTime,
      props.orderDetails.outTime
    );
  }
  if (props.orderDetails.outTime && props.orderDetails.arrearsTime) {
    timeDifference3.value = calculateTimeDifference(
      props.orderDetails.outTime,
      props.orderDetails.arrearsTime
    );
  }
  if (props.orderDetails.arrearsTime && props.orderDetails.payTime) {
    timeDifference4.value = calculateTimeDifference(
      props.orderDetails.arrearsTime,
      props.orderDetails.payTime
    );
  }
  if (props.orderDetails.payTime && props.orderDetails.completionTime) {
    timeDifference5.value = calculateTimeDifference(
      props.orderDetails.payTime,
      props.orderDetails.completionTime
    );
  }
});
</script>

<style lang="less" scoped>
.total-amount-title {
  font-weight: 600;
  font-size: 26px;
  color: #333333;
}
.table-component {
  .row-content {
    margin-top: 32px;
    .icon-img {
      width: 29px;
      height: 29px;
    }
  }
  .time-content {
    position: relative;
    top: 0;
  }
  .time-content2 {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}
/deep/ .el-step__title.is-finish {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}
/deep/ .el-step.is-center .el-step__description {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
/deep/ .el-step.is-center .el-step__description {
  padding-left: 10%;
  padding-right: 10%;
}
</style>